<script setup lang="ts">
import { EDropdown } from 'exploria-ui';
</script>

<template>
    <EDropdown trigger="contextmenu" placement="left-start">
        <div class="box">右键打开</div>
        <template #dropdown>
            <div class="dropdown-content">
                <div class="item">1</div>
                <div class="item">1</div>
                <div class="item">1</div>
            </div>
        </template>
    </EDropdown>
</template>

<style lang="scss" scoped>
.box {
    height: 100px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: grid;
    place-items: center;
}

.dropdown-content {
    min-width: 100px;
    background-color: #fff;
    border-radius: 4px;

    .item {
        padding: 10px;
        cursor: pointer;

        &:hover {
            background-color: #f5f5f5;
        }
    }
}
</style>
